<template>
    <view>
        <!-- <z-paging
            ref="paging"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            safe-area-inset-bottom
            bg-color="#fff"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            :refresher-status.sync="refresherStatus"
        > -->
        <view class="search flex_wrap" slot="top">
            <template>
                <view class="search_t">
                    <view style="width: 500rpx; margin: 10rpx 0 0 20rpx">
                        <u-input
                            prefixIcon="search"
                            border="none"
                            v-model="fillterParams.goodsName"
                            prefixIconStyle="font-size: 48rpx;color: #999"
                            placeholderStyle="font-size: 28rpx;color: #999"
                            :customStyle="{ background: '#E1E1E1' }"
                            placeholder="请输入关键字"
                        ></u-input>
                    </view>
                    <view class="search_type" @click="doSearch">搜索</view>
                </view>
            </template>
        </view>

        <!-- 搜索记录 -->
        <view class="searchRecord" v-if="isRecord === true">
            <text
                style="margin-left: 8px; font-weight: bolder; font-size: 32rpx"
                >最近搜索</text
            >
            <view class="recordTag">
                <view
                    class="tag"
                    slot="cell"
                    v-for="(item, index) in recordList"
                    :key="index"
                    @click="recordSearch(index)"
                    >{{ item }}</view
                >
            </view>
            <view class="" v-if="isData === true">
                <img
                    src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
                    alt=""
                    style="
                        width: 308rpx;
                        height: 308rpx;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-left: -154rpx;
                        margin-top: -154rpx;
                    "
                />
            </view>
        </view>
        <view class="scrollViews" v-if="isResult === true">
            <view>
                <view
                    class="item flex_wrap flex_column"
                    v-for="(item, index) in dataList"
                    :key="index"
                    @click="goDetails(item)"
                >
                    <view>
                        <view class="topMessage flex_wrap row_between">
                            <view class="flex_wrap row_middle flex-wrap">
                                <u-image
                                    :src="item.avatar || MissingAvatar"
                                    width="100rpx"
                                    height="100rpx"
                                    bgColor="#eee"
                                    shape="circle"
                                />
                                <view class="flex_wrap flex_column">
                                    <view style="margin-left: 20rpx">
                                        <view class="flex_wrap">
                                            <u-text
                                                :text="
                                                    item.latestSignInNotes ||
                                                    item.nickName ||
                                                    '微信用户'
                                                "
                                                color="#333"
                                                bold
                                                size="40rpx"
                                            />
                                        </view>
                                        <u-gap height="10rpx" />
                                        <u-text
                                            color="#666"
                                            :text="item.customerPhone || '--'"
                                        />
                                    </view>
                                </view>
                                <view
                                    class="u-page__tag-item"
                                    v-for="(v, i) in item.tag"
                                    :key="i"
                                >
                                    <u-tag
                                        :text="`${v}`"
                                        :name="v"
                                        borderColor="#588BF3"
                                        color="#588BF3"
                                        plain
                                    >
                                    </u-tag>
                                </view>
                            </view>
                            <view style="margin-top: 20rpx; text-align: right">
                                <u-icon
                                    name="arrow-right"
                                    color="#333"
                                    size="14"
                                    top="20rpx"
                                    bold
                                />
                            </view>
                        </view>
                        <u-gap height="2rpx" bgColor="#F3F3F3" />
                        <view class="time">
                            <u-text
                                color="#666"
                                :text="
                                    `时间：` + (item.correlationTime || '--')
                                "
                            />
                            <view>
                                <u-rate
                                    :value="item.customerStar"
                                    activeColor="#FFAA00"
                                    readonly
                                    :size="16"
                                ></u-rate>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <img
                v-if="dataList.length === 0"
                src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
                alt=""
                style="
                    width: 308rpx;
                    height: 308rpx;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -154rpx;
                    margin-top: -154rpx;
                "
            />
            <uni-load-more :status="collectStatus"></uni-load-more>
        </view>
        <!-- </z-paging> -->
    </view>
</template>

<script>
import {
    pageCustomerManageBySalesmanId,
    newCustomerNum,
} from "@/api/userManageSalesman.js";
import { getCustomerManageTagList } from "@/api/login.js";
export default {
    data() {
        return {
            sortField: "1", //时间排序 1 星级排序 2
            currentIndex: 0,
            isRecord: true,
            recordList: [
                // 搜索记录
            ],
            collectStatus: "more",
            isData: false,
            isResult: false,
            isRecord: true,
            fillterParams: {
                goodsName: "", // 商品名称
                pageNum: 1, // 当前页面
                pageSize: 10, // 每页条数
            },
            goodsTotal: 0, // 商品总数
            MissingAvatar: "/static/img/conference/MissingAvatar.png",
            salesmanId: "",
            orderNum: "",
            total: 0,
            keyword: "",
            dataList: [],
            newCustomerNumList: {},
        };
    },

    onShow() {
        // 历史搜索记录
        if (uni.getStorageSync("record1")) {
            this.recordList = this.unique(uni.getStorageSync("record1"));
            if (uni.getStorageSync("record1").length > 20) {
                this.recordList = this.unique(
                    uni.getStorageSync("record1").splice(0, 20)
                );
            }
        } else {
            this.isData = true;
        }

        getCustomerManageTagList({}).then((res) => {
            const tagList = this.unique(res.data);
            this.recordList = this.unique([...this.recordList, ...tagList]);
        });
        // this.queryList();
    },
    onReachBottom() {
        let allTotal = this.fillterParams.pageNum * this.fillterParams.pageSize;
        if (allTotal < this.goodsTotal) {
            //当前条数小于总条数 则增加请求页数
            this.collectStatus = "loading"; //加载中状态
            this.fillterParams.pageNum++;
            pageCustomerManageBySalesmanId({
                pageNum: this.fillterParams.pageNum,
                pageSize: 20,
                query: this.fillterParams.goodsName,
            }).then((res) => {
                if (res.code === 200) {
                    this.pageData = res.data.rows;
                    this.dataList = [...this.dataList, ...this.pageData];
                }
            });
        } else {
            this.collectStatus = "noMore";
        }
    },
    methods: {
        // 点击搜索标签
        recordSearch(key) {
            this.fillterParams.goodsName = this.recordList[key];
            this.doSearch();
        },

        // 记录去重
        unique(recordList) {
            return Array.from(new Set(recordList));
        },

        // 点击搜索按钮
        doSearch() {
            console.log("object :>>3333 ", this.fillterParams);
            if (!this.fillterParams.goodsName)
                return uni.showToast({
                    title: "请输入关键字",
                    icon: "none",
                });
            if (this.fillterParams.goodsName !== "") {
                // uni.startPullDownRefresh();
                this.isRecord = false;
                this.isResult = true;
                this.recordList.unshift(this.fillterParams.goodsName);
                this.queryList();
                if (this.recordList.length > 0) {
                    uni.setStorageSync("record1", this.unique(this.recordList));
                }
                if (
                    this.recordList.length > 20 ||
                    this.recordList.length == 20
                ) {
                    this.recordList = this.recordList.splice(0, 20);
                }
            }
        },

        goPage() {
            uni.navigateTo({
                url: "/pages_operate/userdata/index",
            });
        },
        async queryList() {
            const params = {
                pageNum: 1,
                pageSize: 20,
                query: this.fillterParams.goodsName,
                // orderType: "2", //正序 1倒序 2
                // sortField: this.sortField, //时间排序 1 星级排序 2
            };
            const result = await pageCustomerManageBySalesmanId(params);
            if (result.data.rows) {
                result.data.rows.map((v) => {
                    if (v.tag) {
                        v.tag = v.tag.split(",").map((v) => v);
                    } else {
                        v.tag = [];
                    }
                });
            }
            console.log(333, result.data.rows);
            this.dataList = result.data.rows;
            uni.stopPullDownRefresh();
            // this.$refs.paging.complete(result.data.rows);
            this.goodsTotal = result.data.total;
        },

        keywordSearch() {
            this.queryList();
        },
        starChange(e, item) {
            // this.customerStar = e;
        },
        goDetails(e) {
            const data = JSON.stringify(e);
            this.$u.route({
                url: "/pages_my/user_manage/userDetails/index",
                params: {
                    data,
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.searchRecord {
    margin: 10rpx 28rpx 30rpx;
    font-size: 14px;
    font-family: PingFang SC-粗体, PingFang SC;
    font-weight: normal;
    line-height: 68rpx;
    background: url(@/pages_shop1/static/img/shop/group.png);
    width: 694rpx;
    height: 68rpx;
}

.search {
    padding: 40rpx 28rpx;
}

.search_t {
    width: 100%;
    height: 64rpx;
    background: #e1e1e1;
    border-radius: 64rpx;
    font-weight: none;
    display: flex;
    justify-content: space-between;
}

.search_type {
    width: 104rpx;
    height: 64rpx;
    background: #588bf3;
    border-radius: 0px 64rpx 64rpx 0px;
    color: #fff;
    line-height: 64rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
}

.recordTag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 730rpx;
    margin-top: 20rpx;
    padding: 0 28rpx;
}

.tag {
    padding: 10rpx 20rpx;
    // background-color: #fff;
    font-size: 28rpx;
    margin-bottom: 24rpx;
    margin-right: 40rpx;
    height: 52rpx;
    text-align: center;
    line-height: 32rpx;
    border-radius: 26rpx;
    border: 1px solid #588bf3;
    color: #588bf3;
}

.top {
    padding: 36rpx 28rpx;
}

.scrollViews {
    width: 100%;
    padding: 30upx 28upx 0 28upx;
    box-sizing: border-box;
    background: #f7f7f7;
    margin-top: 10rpx;

    .item {
        width: 100%;
        height: auto;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 40upx;
        background-color: #fff;

        .topMessage {
            padding: 30upx 20rpx;
            // border-bottom: 1px solid #dddadf;
            text-align: center;
            position: relative;
        }

        .statusBg {
            width: 121rpx;
            height: 40rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 40rpx;
            text-align: center;
            background-size: contain;
        }

        .bottomMessage {
            padding: 20upx;
            box-sizing: border-box;
            background-color: rgba(245, 246, 250, 0.6);
        }

        .timeBox {
            margin-left: 100rpx;
        }
    }
}

/* 其他顾问 */
.else_enterprise {
    // padding: 20rpx 20rpx;

    margin-top: 12rpx;
    padding: 32rpx;
    background: linear-gradient(
        135deg,
        #deebf9 0%,
        rgba(255, 255, 255, 0) 100%
    );

    .list1,
    .list2 {
        width: 134rpx;
        height: 48rpx;
        color: #fff;
        text-align: center;
        line-height: 48rpx;
        background: linear-gradient(90deg, #74adff 0%, #4992fa 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 28rpx;
        margin-right: 20rpx;
    }

    .list2 {
        background: linear-gradient(90deg, #58eaf7 0%, #48c4cf 100%);
    }
}

.el_adviser_info_info {
    display: flex;
    align-items: center;
}

.el_adviser_info_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin: 0 20rpx;
}

button::after {
    border: none;
    border-radius: 0;
}

.adviser_info,
.adviser_else {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    color: #333;
    justify-content: space-between;
}

.adviser_info_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}
.tab {
    // padding: 0 90rpx 18rpx;
    flex: 1;
    display: flex;
    justify-content: center;
}
.up {
    font-size: 28rpx;
    color: #588bf3;
    margin-right: 10rpx;
}
.down {
    font-size: 28rpx;
    color: #777777;
    margin-right: 10rpx;
}
.time {
    padding: 18rpx 36rpx;
    display: flex;
}
.u-page__tag-item {
    margin-left: 10rpx;
    margin-top: 20rpx;
}
</style>
